<template>
  <div class="user-contain" v-loading="loading">
    <div class="head-contain">
      <el-menu default-active="" mode="horizontal" @select="handleSelect">
        <el-menu-item index="">全部类型</el-menu-item>
        <el-menu-item v-for="item in categoryList" :key="item.id" :index="item.category_name">{{ item.category_name
          }}</el-menu-item>
      </el-menu>
    </div>
    <div class="body-contain">
      <!-- 左边区域 -->
      <div class="left-contain">
        <el-card v-if="articleList.length != 0">
          <div v-for="item in articleList" :key="item.id">
            <!-- 文章内容区域 -->
            <div style="display: flex;">
              <!-- 封面图片区域 -->
              <div style="margin-right: 10px; width: auto;display: flex;justify-content: center;align-items: center;">
                <img v-if="item.picture" :src="item.picture" class="avatar">
              </div>
              <!-- 文字区域 -->
              <div style="width: auto;">
                <el-descriptions :colon="false" direction="vertical" :column="1">
                  <el-descriptions-item>
                    <p @click="$router.push('/articleDetail?articleID=' + item.id)"
                      style="font-weight: bolder;margin: 0px; font-size: 18px; cursor: pointer;">
                      {{ item.title }}
                    </p>
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <p @click="$router.push('/articleDetail?articleID=' + item.id)"
                      style="margin: 0px; width: 98%;cursor: pointer;">
                      {{ item.content }}
                    </p>
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <span style="margin: 0;display: flex;justify-content: right; padding-bottom: 8px;">
                      <p style="margin: 0px 20px;"><i class="iconfont icon-dianzan"></i>{{ item.likeNum }}</p>
                      <p style="margin: 0px 20px;display: flex;align-items: center;" class="el-icon-star-off">
                        {{ item.favoriteNum }}</p>
                      <p style="margin: 0px 20px;display: flex;align-items: center;" class="el-icon-user">作者：{{
        item.nickname }}</p>
                    </span>
                  </el-descriptions-item>
                </el-descriptions>
              </div>

            </div>
            <!-- 分割线 -->
            <el-divider></el-divider>
          </div>
          <div style="display: flex;justify-content: right;margin: 20px 30px 0 0;">
            <el-button style="padding: 0;" type="text" @click="handelLoadMore">{{ loadMore }}</el-button>
          </div>
        </el-card>
      </div>
      <!-- 右边区域 -->
      <div v-if="(!article.searchContent) && (articleList.length != 0)" class="right-contain">
        <!-- 推荐阅读 -->
        <el-card>
          <span style="margin: 0; display: flex; justify-content: space-between;">
            <p style="margin: 0; font-size: 14px;font-weight: bolder;">推荐阅读</p>
            <p style="margin: 0;">
              <el-button type="text" @click="getRandomArticleList">换一换</el-button>
            </p>
          </span>
          <div v-for="item in randomCategoryList" :key="item.id">
            <!-- 文章内容区域 -->
            <div style="display: flex;">
              <!-- 文字区域 -->
              <div style="width: auto;">
                <el-descriptions :colon="false" direction="vertical" :column="1">
                  <el-descriptions-item>
                    <p @click="$router.push('/articleDetail?articleID=' + item.id)"
                      style="font-weight:bold;margin: 0px; font-size: 14px; cursor: pointer;">
                      {{ item.title }}
                    </p>
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <p @click="$router.push('/articleDetail?articleID=' + item.id)"
                      style="margin: 0px; font-size: 10px;cursor: pointer;">
                      {{ item.content }}
                    </p>
                  </el-descriptions-item>
                </el-descriptions>
              </div>

            </div>
            <!-- 分割线 -->
            <el-divider></el-divider>
          </div>
        </el-card>
        <!-- 活动页面 -->
        <el-card>
          <span style="margin: 0; display: flex; justify-content: space-between;">
            <p style="margin: 0; font-size: 14px;font-weight: bolder;">热门活动</p>
          </span>
          <span>
            <p style="color: #ccc;text-align: center;">暂时没有活动...</p>
          </span>

        </el-card>
      </div>
      <!-- 空状态 -->
      <div class="empty-contain">
        <span v-if="articleList.length == 0">
          <el-empty description="暂时没有文章..."></el-empty>
        </span>
      </div>
    </div>

  </div>
</template>

<script>
import { getCategoryDetailAPI, getArticleListAPI, getRandomArticleListAPI } from '@/api/public'
export default {
  data() {
    return {
      loading: false,
      loadMore: '点击加载更多...',
      articleList: [],
      categoryList: [],
      randomCategoryList: [],
      num: 5,
      count: 0,
      article: {
        pageNum: 1,
        pageSize: 10,
        searchContent: '',
        category_name: ''
      },
    }
  },
  mounted() {
    this.article.searchContent = this.$route.query.searchContent
    this.getCategoryArticleList()
    this.getRandomArticleList()
  },
  methods: {
    async handelLoadMore(){
      this.loading = true; // 设置加载状态为true
      this.article.pageNum++
      const res2 = await getArticleListAPI(this.article)
      if(res2.data.length == 0){
        this.loadMore = '没有更多文章了...'
      }
      this.articleList = [...this.articleList, ...res2.data]
      this.loading = false; // 取消加载状态
    },
    //获取随机文章类型列表
    async getRandomArticleList() {
      const res3 = await getRandomArticleListAPI(this.num)
      this.randomCategoryList = res3.data
    },
    //获取文章类型列表
    async getCategoryArticleList() {
      const res1 = await getCategoryDetailAPI()
      this.categoryList = res1.data.rows

      const res2 = await getArticleListAPI(this.article)
      this.articleList = res2.data

    },
    // 分类选择更换文章列表
    handleSelect(key) {
      this.article.category_name = key
      this.getCategoryArticleList()
    }
  }
}
</script>

<style>
.head-contain {
  margin-bottom: 5px;
}


.body-contain {
  display: flex;

  .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
    max-width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .empty-contain {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .el-descriptions :not(.is-bordered) .el-descriptions-item__cell {
    padding-bottom: 5px !important;
  }
}


.left-contain {
  width: auto;

  .el-divider--horizontal {
    margin: -5px 0 !important;
  }

  .avatar {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    margin: 10px;
  }
}

.right-contain {
  margin-left: 10px;
  width: 20%;
  min-width: 250px;

  /* 添加一个最小宽度 */
  .el-card {
    border-radius: 8px;
  }

  .el-divider--horizontal {
    margin: 5px 0 !important;
  }
}


.head-contain .el-menu--horizontal>.el-menu-item {
  /* background-color: #ffffff; */
  height: 30px;
  line-height: 20px;
}

.head-contain .el-menu--horizontal>.el-menu-item.is-active {
  border-bottom: 2px solid rgb(102, 110, 120);
}
</style>
